<template>
  <div style="padding: 15px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="期初单号">
              <el-input v-model="form.code" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="仓库">
              <el-input v-model="form.warehouseName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="19">
          <div class="grid-content bg-purple">
            <el-form-item  label="备注">
              <el-input v-model="form.remarks" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :align="allAlign"
      :data="tableData"
      show-footer
      height="500"
      @scroll="scrollEvent"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="shipmentName" title="入驻商" width="120" ></vxe-table-column>
      <vxe-table-column field="warehouseSpaceName" title="库区" min-width="100" />
      <vxe-table-column field="locationName" title="库位" width="120" ></vxe-table-column>
      <vxe-table-column field="goodsName" title="商品名称" width="270"></vxe-table-column>
      <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsUnitName" title="单位"  width="270"></vxe-table-column>
      <vxe-table-column field="unitQuantity" title="数量" width="120"></vxe-table-column>
      <vxe-table-column field="goodsStatusName" title="库存状态" width="120"></vxe-table-column>
      <vxe-table-column field="gmtManufacture" title="生产日期" min-width="150" />
      <vxe-table-column field="gmtExpire" title="过期日期" min-width="150" />
      <vxe-table-column field="gmtStock" title="存货日期" min-width="150" />
      <vxe-table-column field="remarks" title="备注"  width="270"></vxe-table-column>
    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>

  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import VXETablePluginElement from 'vxe-table-plugin-element'
  import 'vxe-table-plugin-element/dist/style.css'
  import goodsSelect from '@/views/components/goodsElSelect.vue'
  import {getWarehouse} from '@/api/basicInfo'
  import { collectEdit, initializationDetail, getInitializationDetails } from '@/api/store'
  import Qs from 'qs'
  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
  VXETable.use(VXETablePluginElement)
  export default {
    name: 'Parent',
    components: {
      goodsSelect,
    },
    data() {
      return {
        allAlign:'center',
        warehouseData:[],
        shipmentData: [],
        isDisable:false,   //确定键显示按钮
        typeList: [
          { code: "0", name: "仓库领用" },
          { code: "1",name: "财务领用" }
        ],
        form: {
          code:'',
          shipmentCode: '',
          type:'',
          warehouseCode:"",
          supplierCode:'',
          remarks: '', // 备注
          initializationItemList: [],
          collectBy: '',
          collectDept: ''
        },
        loading: false,
        tableData: [],
        rules: {
          shipmentCode: [
            { required: true, message: '请输入客户姓名', trigger: 'change' }
          ],
          warehouseCode: [
            { required: true, message: '请选择仓库', trigger: 'change' }
          ]
        },
        validRules: {
          goodsName: [
            { required: true, message: '商品名称必须填写' },
          ],
          unitName: [
            { required: true, message: '单位必须填写' },
          ],
          collectQuantity: [
            { required: true, message: '数量必须填写' },
          ],
        },
        listQuery: {
          pageNum: 1,
          pageSize: 60,
          total: 0,
          code: this.$route.query.code
        },
        noMoreData: false, // 数据是否全部加载完成
      }
    },
    created() {
      this.getList()
    },
    methods: {
      scrollEvent(e) {
        if (e.isY && !this.noMoreData) {
            // 函数防抖
            if (this.timer) {
              clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
              const el = this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper')
              const num = el.scrollHeight - (el.offsetHeight + el.scrollTop)
              if (num === 0 || num < 100) {
                this.listQuery.pageNum = this.listQuery.pageNum+1
                const rowNum = this.listQuery.pageNum * this.listQuery.pageSize
                this.getList(rowNum)
              }
            }, 600)
        }
      },
      // 获取期初列表数据
      getList() {
        getInitializationDetails(Qs.stringify(this.listQuery))
          .then(res => {
            this.form = res.data,
            this.tableData = [...this.tableData, ...res.data.initializationItemList]
            this.listQuery.total = this.form.total;
            if (res.data.initializationItemList.length === 0 || res.data.total <= this.tableData.length) {
              this.noMoreData = true
            }
        })
      },
      // 获取页面信息
      getInfo() {
        this.loading = true
        let code = this.$route.query.code ? this.$route.query.code : "";

        initializationDetail(code).then(response => {
          this.form = response.data;
          this.tableData = this.form.initializationItemList;
          this.loading = false
        })
      },
      // 选择入驻商
      setCustomerCode(value) {
        this.form.shipmentCode = value;
        this.tableData = [];
      },
      // 仓库查询
      getWarehouse(){
        getWarehouse().then(response => {
          this.warehouseData = response.data
        })
        this.getInfo()
      },
      // 商品选择
      setGoodsCode(row){
        let obj = this.$refs.goodsSelect.obj
        row.goodsName = obj.value;
        row.goodsCode = obj.code;
        row.goodCode = obj.goodCode;
        row.goodsUnit = obj.unitCode;
        row.goodsBarCode = obj.barCode;
        row.goodsUnitConversionList = obj.goodsUnitConversionList;
      },
      // 单位选择
      selectGoodsUnitCode(event, row){
        row.goodsUnit = event.value;
        row.unitName = event.label;
      },
      // 公共取消
      fatherItemCancel(modelFlag) {
        switch (modelFlag) {
          case 'add':
            this.modelAddFlag = false
            break
          case 'edit':
            this.modelEditFlag = false
            break
          default:
        }
      },
      // 新增
      insertEvent (row) {
        if (this.form.shipmentCode && this.form.warehouseCode) {
          let record = {};
          let {row: newRow} = this.$refs.xTable.insertAt(record, row);
          this.$refs.xTable.setActiveCell(newRow, 'goodsName');
        } else {
          this.$message.error('仓库、入驻商不能为空')
        }
      },
      // 删除
      removeEvent (row) {
        this.$XModal.confirm('您确定要删除该数据?').then(type => {
          if (type === 'confirm') {
            this.$refs.xTable.remove(row)
          }
        })
      },
      // 保存
      funcSubmitSave() {
        this.form.initializationItemList = this.$refs.xTable.tableData;
        this.form.status = 0;
        const data = this.form;
        if (!this.$refs.xTable.tableData.length) {
          this.$message.error('请新增明细')
        } else {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$refs.xTable.validate((valids) => {
                if(valids){
                  this.isDisable = true
                  collectEdit(data).then(response => {
                    this.$message({ message: response.msg, type: 'success' })
                    this.$emit('fatherEditMethod')
                    this.isDisable = false
                  }).then(() => {
                    this.tableData = []
                    this.form = {}
                  }).catch(() => this.isDisable = false)
                }else {
                  return false
                }
              })
            } else {
              return false
            }
          })
        }
      },
    // 返回
    funcSubmitCheck() {
      this.$eventBus.$emit('refreshList')
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/kngl/initializationList"
      });
    },

      footerMethod ({ columns, data }) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 1) {
              return '合计'
            }
            if (['collectQuantity'].includes(column.property)) {
                return XEUtils.sum(data, column.property).toFixed(3)
            }
            return '-'
          })
        ]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 175px;
    // float: right;
  }
</style>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar{padding:0 0 10px 0}
</style>
